<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script
      src="{{ url_for('static', filename='mobile/js/utils/rem.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/association.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/course.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/app.css') }}"
    />
    <title>Course Management</title>
  </head>
  <body>
    <div class="ass" onclick="hideSemesterFn()">
      <div class="ass-con">
        <div class="phone-header">
          <div class="phone-input-con">
            <input type="text" placeholder="search" class="phone-ass-input" />
            <img
              src="{{ url_for('static', filename='mobile/img/014.svg') }}"
              class="img-014 cursor-pointer"
              alt=""
            />
          </div>
          <div class="ph-people">
            <img
              class="ph-people-pic"
              src="{{ url_for('get_avatar', filename=user.avatar) }}"
              alt=""
            />
            <div>
              <p class="ph-people-title">Hi, {{ user.name }}</p>
              <p class="ph-people-tip">welcome to {{ school }}</p>
            </div>
          </div>
        </div>
        <div class="ass-side">
          <div class="ass-header-phone">
            <div class="ass-logo">logo</div>
            <div class="ass-header-name">{{ school }}</div>
          </div>
          <ul class="ass-side-list">
            <li class="active">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my course</div>
            </li>
            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my task</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">notification</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">timetable</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Grades</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">homework</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Social</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Societies</div>
            </li>
          </ul>
          <div class="under-line"></div>
          <div class="ass-workplace">
            <p>workplace</p>
            <button>
              <span>forum</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
            <button>
              <span>My upload</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
          </div>
          <a href="{{ url_for('auth.login') }}" class="signOut">
						<img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
						sign out
					</a>
        </div>
        <div class="ass-contents">
          <div class="ass-content-phone">
            <div class="grade-left">
              <div class="find-teacher-header">
                <p onclick="showSemesterFn(this,event)">
                  <span class="semes"> First semester </span>
                  <span class="grade-time-tips">
                      <span class="a-left">
                          March 21, 2021—July 1, 2021
                           <svg
                      class="down"
                      viewBox="0 0 32 32"
                      width="100%"
                      height="100%"
                    >
                      <path
                        d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                      ></path>
                    </svg>
                      </span>
                      <span class="a-right">
                           <svg
                      class="down"
                      viewBox="0 0 32 32"
                      width="100%"
                      height="100%"
                    >
                      <path
                        d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                      ></path>
                    </svg>
                           <svg
                      class="down"
                      viewBox="0 0 32 32"
                      width="100%"
                      height="100%"
                    >
                      <path
                        d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                      ></path>
                    </svg>
                      </span>
                  </span>
                </p>
                <div class="semester-con">
                  <p onclick="selectSemesterFn(0,event)">
                    <span>First semester</span>
                    <img
                      src="{{ url_for('static', filename='mobile/img/008.svg') }}"
                      alt=""
                    />
                  </p>
                  <p onclick="selectSemesterFn(1,event)">
                    <span>Second semester</span>
                    <img
                      src="{{ url_for('static', filename='mobile/img/008.svg') }}"
                      alt=""
                    />
                  </p>
                  <p onclick="selectSemesterFn(2,event)">
                    <span>Third semester</span>
                    <img
                      src="{{ url_for('static', filename='mobile/img/008.svg') }}"
                      alt=""
                    />
                  </p>
                </div>
              </div>
              <div class="course-top-lists phone-show">
                {% for course in courses %}
                <div
                  class="grade-right-list"
                  onclick="to_course_detail({{course.id}})"
                >
                  <div>
                    <p class="grade-right-circle"></p>
                    <div>
                      <p class="grade-right-title">
                        {{ course.name }}
                        <span class="grade-right-tips"
                          >{{ course.progress }}/{{ course.lessons }}</span
                        >
                      </p>
                      <p class="grade-right-tip">
                        {{ course.professor.name }} - {{ course.professor.post
                        }}
                      </p>
                      <p class="grade-right-line">
                        <span class="grade-right-active"></span>
                      </p>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
              <div class="task">
                <p class="task-titles">ongoing task</p>
                <div class="task-lists">
                  <div class="task-list">
                    <div>
                      <p class="task-title">Computer Programming Course work 2</p>
                      <p class="task-tip">deadline：today 7am</p>
                    </div>
                    <p>
                      <span class="completed">completed </span>
                      <span class="task-circle"></span>
                    </p>
                  </div>
                  <div class="task-list active">
                    <div>
                      <p class="task-title">Interactive design Course work2</p>
                      <p class="task-tip">deadline：today 3pm</p>
                    </div>
                    <p>
                      <span class="completed">completed </span>
                      <span class="task-circle"></span>
                    </p>
                  </div>
                  <div class="task-list">
                    <div>
                      <p class="task-title"> Database System Course work 2</p>
                      <p class="task-tip"> tomorrow 9pm</p>
                    </div>
                    <p>
                      <span class="completed">completed </span>
                      <span class="task-circle"></span>
                    </p>
                  </div>
                  <div class="task-list">
                    <div>
                      <p class="task-title">Risk and Decision Course work2</p>
                      <p class="task-tip">deadline：2021/05/04 7am</p>
                    </div>
                    <p>
                      <span class="completed">completed </span>
                      <span class="task-circle"></span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="grade-right">
              <!-- 日历 -->
              <div class="notification">
                <p class="notification-title">
                  <span class="notification-sub-title">notification</span>
                  <span class="all">all</span>
                </p>
                <div class="community-list">
                  <p class="community-titles">
                    <span class="community-title-left">Class reminder</span>
                    <span class="community-title-right">
                      1 hour countdown
                      <img
                        src="{{ url_for('static', filename='mobile/img/007.svg') }}"
                        alt=""
                      />
                    </span>
                  </p>
                  <p class="community-tip">
                    There will be a video lesson from the professor in an hour
                  </p>
                </div>
                <div class="community-list">
                  <p class="community-titles">
                    <span class="community-title-left">exam reminder</span>
                    <span class="community-title-right">
                      1 hour countdown
                      <img
                        src="{{ url_for('static', filename='mobile/img/007.svg') }}"
                        alt=""
                      />
                    </span>
                  </p>
                  <p class="community-tip">
                    There will be a video lesson from the professor in an hour
                  </p>
                </div>
                <div class="community-list">
                  <p class="community-titles">homework submission reminder</p>
                  <p class="community-tip">
                    There will be a video lesson from the professor in an hour
                  </p>
                </div>
                <div class="community-list">
                  <p class="community-titles">school start</p>
                  <p class="community-tip">March 21, 2021—July 1, 2021</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
      function showSemesterFn(obj, event) {
        stopP(event);
        $(".semester-con").toggleClass("show");
      }

      function stopP(e) {
        var evt = e || window.event;
        evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
      }

      function hideSemesterFn() {
        $(".semester-con").removeClass("show");
      }

      function selectSemesterFn(num, event) {
        stopP(event);
        for (var i = -1; i < 2; i++) {
          $(".semester-con p").eq(i).removeClass("active");
        }
        $(".semester-con p").eq(num).addClass("active");
        $(".semes").text($(".semester-con p").eq(num).text());
      }

      function to_course_detail(id) {
        location.href = "/course/lesson/" + id;
      }
    </script>
    <script type="text/javascript">
      $(document).ready(function (e) {
        CalendarHandler.initialize();
        // $("#header").load("components/header.html");
        $(".phone-header .img-014").click(function (e) {
          e.stopPropagation();
          $(".ass-side").css("display", "block");
        });
        $(".ass-con").click(function () {
          $(".ass-side").css("display", "none");
        });

        $(".ass-side").click(function (event) {
          event.stopPropagation();
        });
        $(".ass-side-list>li:nth-child(1)").on("click", function () {
          location.href = "/student/course";
        });
        $(".ass-side-list>li:nth-child(4)").on("click", function () {
          location.href = "/student/timetable";
        });
        $(".ass-side-list>li:nth-child(5)").on("click", function () {
          location.href = "/student/grade";
        });
        $(".ass-side-list>li:nth-child(7)").on("click", function () {
          location.href = "/student/social";
        });
      });

      var CalendarHandler = {
        currentYear: 0,
        currentMonth: 0,
        isRunning: false,
        showYearStart: 2009,
        tag: 0,
        initialize: function () {
          $calendarItem = this.CreateCalendar(0, 0, 0);
          $("#Container").append($calendarItem);
        },

        IsRuiYear: function (aDate) {
          return 0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0);
        },
        CalculateWeek: function (y, m, d) {
          var arr = "7123456".split("");
          with (document.all) {
            var vYear = parseInt(y, 10);
            var vMonth = parseInt(m, 10);
            var vDay = parseInt(d, 10);
          }
          var week = arr[new Date(y, m - 1, vDay).getDay()];
          return week;
        },
        CalculateMonthDays: function (m, y) {
          var mDay = 0;
          if (
            m == 0 ||
            m == 1 ||
            m == 3 ||
            m == 5 ||
            m == 7 ||
            m == 8 ||
            m == 10 ||
            m == 12
          ) {
            mDay = 31;
          } else {
            if (m == 2) {
              //判断是否为芮年
              var isRn = this.IsRuiYear(y);
              if (isRn == true) {
                mDay = 29;
              } else {
                mDay = 28;
              }
            } else {
              mDay = 30;
            }
          }
          return mDay;
        },
        CreateCalendar: function (y, m, d) {
          $dayItem = $('<div class="dayItem"></div>');
          var nowDate = new Date();
          if (
            (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) ||
            (y == 0 && m == 0)
          )
            $(".currentDay").hide();
          var nowYear = y == 0 ? nowDate.getFullYear() : y;
          this.currentYear = nowYear;
          var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;
          this.currentMonth = nowMonth;
          var nowDay = d == 0 ? nowDate.getDate() : d;
          $(".selectYear").html(nowYear);

          var en_mon_arr = [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Spt",
            "Oct",
            "Nov",
            "Dec",
          ];

          $(".selectMonth").html(en_mon_arr[nowMonth - 1]);
          $(".selectDay").html(nowDay);

          var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
          var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
          var lastMonthDaysNub = this.CalculateMonthDays(nowMonth - 1, nowYear);
          if (nowWeek != 0) {
            for (
              var i = lastMonthDaysNub - (nowWeek - 1);
              i < lastMonthDaysNub;
              i++
            ) {
              $dayItem.append(
                '<div class="item lastItem"><a>' + (i + 1) + "</a></div>"
              );
            }
          }
          for (var i = 0; i < nowDaysNub; i++) {
            if (i == nowDay - 1)
              $dayItem.append(
                '<div class="item currentItem"><a>' + (i + 1) + "</a></div>"
              );
            else
              $dayItem.append('<div class="item"><a>' + (i + 1) + "</a></div>");
          }

          var hasCreateDaysNub = nowWeek + nowDaysNub;
          if (hasCreateDaysNub < 42) {
            for (var i = 0; i <= 42 - hasCreateDaysNub; i++) {
              $dayItem.append(
                '<div class="item lastItem"><a>' + (i + 1) + "</a></div>"
              );
            }
          }
          return $dayItem;
        },
        CalculateNextMonthDays: function () {
          if (this.isRunning == false) {
            $(".currentDay").show();
            var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1;
            var y =
              this.currentMonth == 12 ? this.currentYear + 1 : this.currentYear;
            var d = 0;
            var nowDate = new Date();
            if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1)
              d = nowDate.getDate();
            else d = 1;
            $calendarItem = this.CreateCalendar(y, m, d);
            $("#Container").append($calendarItem);

            this.isRunning = true;

            $($("#Container").find(".dayItem")[0]).remove();
            CalendarHandler.isRunning = false;
          }
        },
        CalculateLastMonthDays: function () {
          if (this.isRunning == false) {
            $(".currentDay").show();
            var nowDate = new Date();
            var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;
            var y =
              this.currentMonth == 1 ? this.currentYear - 1 : this.currentYear;
            var d = 0;

            if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1)
              d = nowDate.getDate();
            else d = 1;
            $calendarItem = this.CreateCalendar(y, m, d);
            $("#Container").append($calendarItem);
            var itemPaddintTop = $(".dayItem").height() / 6;
            this.isRunning = true;

            $($("#Container").find(".dayItem")[0]).remove();
            CalendarHandler.isRunning = false;
          }
        },
      };
    </script>
  </body>
</html>
